import { CSSProperties, PropType } from "vue"
import Cropper from 'cropperjs'

export const defaultOptions: Cropper.Options = {
  aspectRatio: 1,
  zoomable: true,
  zoomOnTouch: true,
  zoomOnWheel: true,
  cropBoxMovable: true,
  cropBoxResizable: true,
  toggleDragModeOnDblclick: true,
  autoCrop: true,
  background: true,
  highlight: true,
  center: true,
  responsive: true,
  restore: true,
  checkCrossOrigin: true,
  checkOrientation: true,
  scalable: true,
  modal: true,
  guides: true,
  movable: true,
  rotatable: true,
}

export const basicProps = {
  width: {
    type: [String, Number],
    default: '300px'
  },
  height: {
    type: [String, Number],
    default: '150px'
  },

  // 裁剪后的图片是否为圆形
  circled: {
    type: Boolean,
    default: false
  },

  // 图片裁剪是否支持实时预览
  realTimePreview: {
    type: Boolean,
    default: true
  },

  crossorigin: {
    type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,
    default: undefined
  },

  imageStyle: {
    type: Object as PropType<CSSProperties>,
    default: () => ({})
  },
  options: {
    type: Object as PropType<Cropper.Options>,
    default: () => ({})
  },

  src: {
    type: String
  },

  desc: {
    type: String,
    default: '图片需限制在5M以内'
  },

  // 图片上传地址
  uploadUrl: String
}